<template>
  <div>
    <input type="text" placeholder="用户名" v-model="username" />
    <br />
    <input type="password" placeholder="密码" v-model="password" />
    <br />
    喜欢哪个球队：
    <!-- v-model写在select上，绑定的值是option的value -->
    <select v-model="team">
      <option value="laoying">老鹰</option>
      <option value="taiyang">太阳</option>
      <option value="kuaichuan">快船</option>
    </select>
    <br />
    <input type="radio" value="smoking" v-model="best" />抽烟
    <input type="radio" value="drinking" v-model="best" />喝酒
    <input type="radio" value="coding" v-model="best" />写代码
    <br />
    <!-- 复选框：
      1. 当vue的数据变量是布尔值时候，此时v-model关联的是复选框的checked属性
      2. 当vue的数据变量是数组的时候，此时v-model关联的是复选框的value属性，必须手动写上value属性 -->
    是否同意用户协议：
    <input type="checkbox" v-model="isAgree" />
    <br />
    个人爱好：
    <input type="checkbox" value="smoking" v-model="hobby" />抽烟
    <input type="checkbox" value="drinking" v-model="hobby" />喝酒
    <input type="checkbox" value="coding" v-model="hobby" />写代码

    <br />
    个人简介：
    <textarea v-model="intro"></textarea>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      team: "taiyang",
      best: "drinking",
      isAgree: false,
      hobby: [],
      intro: "",
    };
  },
};
</script>
<style>
</style>
